<ng-container *ngrxLet="viewer$ as viewer">
  <nz-tabset [nzAnimated]="false">
    <nz-tab nzTitle="Write">
      <nz-mention
        [nzSuggestions]="suggestions"
        (nzOnSearchChange)="onSearchChange($event)"
        [nzPrefix]="['#', '@', '$']"
        nzNotFoundContent="No matches..."
        [nzValueWith]="autoCompleteValueFor"
        (nzOnSelect)="suggestions = []">
        <textarea
          [placeholder]="(viewer && viewer.canCurate) ? 'Enter comment (minimum length 10. Use @ to mention users; # to link entities)' : 'Please sign in'"
          nzMentionTrigger
          nz-input
          [nzAutosize]="{ minRows: 4, maxRows: 100 }"
          style="width: 100%"
          [attr.disabled]="(viewer && viewer.canCurate) ? null : true"
          [(ngModel)]="commentText"
          (ngModelChange)="onCommentChanged($event)"></textarea>
        <ng-container *nzMentionSuggestion="let entity">
          <span>{{entity.displayName}}</span>
        </ng-container>
      </nz-mention>
    </nz-tab>
    <nz-tab
      nzTitle="Preview"
      (nzClick)="onPreviewButtonClicked()">
      <ng-container *ngIf="(previewLoading$ | ngrxPush) as loading">
        <nz-spin nzTip="Loading..."></nz-spin>
      </ng-container>
      <ng-container *ngIf="(previewComment$ | ngrxPush) as previewComment">
        <cvc-comment-body
          [commentBodySegments]="previewComment"></cvc-comment-body>
      </ng-container>
    </nz-tab>
  </nz-tabset>
</ng-container>
